<script setup>
import { computed } from 'vue'

const props = defineProps({
    hidden: {
        type: Number,
        default: 0
    },
    page: {
        type: Number,
        default: 1
    },
    pageSize: {
        type: Number,
        default: 4
    },
    page_Sizes: {
        type: Array,
        default: () => [1, 2, 3, 4, 8]
    },
    total: {
        type: Number,
        default: 0
    }
})
const emit = defineEmits(['update:page', 'update:pageSize', 'pagination'])
const page = computed({
    get: () => props.page,
    set: (val) => {
        emit('update:page', val)
    }
})
const pageSize = computed({
    get: () => props.pageSize,
    set: (val) => {
        emit('update:pageSize', val)
    }
})
const onSizeChange = () => {
    emit('pagination')
}
const onCurrentChange = () => {
    emit('pagination')
}
</script>
<template>
    <div class="bottom" v-if="hidden > 0">
        <!-- 分页 -->
        <el-pagination v-model:current-page="page" v-model:page-size="pageSize" class="pagination"
            :page-sizes="page_Sizes" :background="true" layout="jumper, total, sizes, prev, pager, next" :total="total"
            @size-change="onSizeChange" @current-change="onCurrentChange" />
    </div>
</template>
<style scoped lang="scss">
.bottom {
    margin: 30px 0;
    height: auto;
    margin-left: 20px;

    .pagination {
        margin-top: 10px;
        display: flex;
        justify-content: flex-start;
    }
}
</style>
